<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 第一步 : 引入js文件 -->
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/vue.js"></script>
</head>

<body>
  <table id="app" border="1" cellspacing="0" width="50%">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>职位</th>
      <th>入职日期</th>
      <th>最后操作时间</th>
    </tr>

    <tr style="text-align: center;" v-for="(item,index) in users">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.gender == 1 ? "男" : "女"}}</td>
      <td>{{item.job}}</td>
      <td>{{item.entrydate}}</td>
      <td>{{item.updatetime}}</td>
    </tr>
  </table>
</body>

<script>
  new Vue({
    el: "#app",   // 接管区域
    data: {
      users: [] // 数据模型
    },
    mounted() {  // 钩子函数
      axios.get("http://yapi.eehp.cn/mock/61/user/findAll").then((result) => {
        // console.log(result.data.data);
        this.users = result.data.data;
      });
    }
  })
</script>

</html>